<template>
  <div class="container">
    <div class="sidebar">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        style="height: 100vh; border-right: none;"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Location /></el-icon>
            <h2 style="display:inline;margin-left:4px;font-size:1.2em;">组件通信练习</h2>
          </template>
        </el-sub-menu>
        <el-menu-item index="2" @click="goProps">
          <el-icon><IconMenu /></el-icon>
          <span>Props的使用</span>
        </el-menu-item>
        <el-menu-item index="3" @click="goCoustom">
          <el-icon><IconMenu /></el-icon>
          <span>custom-event的使用</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><Setting /></el-icon>
          <span>mitt的使用</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main-content">
      <div class="center-box">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import {
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const router = useRouter()
const goProps = () => {
  router.push('/props')
}
const  goCoustom = () => {
  router.push('/custom')
}

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 260px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background: #545c64;
}
.main-content {
  margin-left: 260px;
  width: calc(100vw - 260px);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.center-box {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
</style>